{{ define "js" }}
  <script type="text/javascript" src="/js/datatablesNew.min.js"></script>
  <script type="text/javascript" src="/js/datatable_input.js"></script>
  <script src="/js/notificationsCenter.js"></script>
  {{ .CsrfField }}
	<script>
		const DATA = {{.Validators}}
		const NET = {{.Network}}
		const MONITORING = {{.MonitoringSubscriptions}}
		const MACHINES = {{.Machines}} || []
	</script>
{{ end }}

{{ define "css" }}
  <link rel="stylesheet" type="text/css" href="/css/notificationsCenter.css" />
  <link rel="stylesheet" type="text/css" href="/css/datatablesNew.min.css" />
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container-fluid container-xl container-min-width container-custom">
      {{ if .Flashes }}
        {{ range $i, $flash := .Flashes }}
          <div class="alert {{ if contains $flash "Error" }}alert-danger{{ else }}alert-success{{ end }} alert-dismissible fade show my-3 py-2" role="alert">
            <div class="p-2">{{ $flash | formatHTML }}</div>
            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
        {{ end }}
      {{ end }}
      <div class="d-flex flex-column flex-sm-row align-items-start justify-content-center align-items-sm-center justify-content-sm-between ml-1 my-2">
        <nav aria-label="breadcrumb">
          <ol class="breadcrumb font-size-1 mb-0 breadcrumb-custom">
            <li class="breadcrumb-item"><a href="/">Home</a></li>
            <li class="breadcrumb-item active" aria-current="page">Notifications</li>
          </ol>
        </nav>
        <!-- <a href="/user/notifications">Old version</a> -->
      </div>
      <div class="row d-flex align-items-center justify-content-between mx-0 my-5 container-min-width heading-section flex-wrap">
        <div class="pl-0">
          <h1 class="heading text-nowrap">Notifications Center</h1>
          <h2 class="heading-l3 text-muted font-weight-light">Manage the notifications you want to receive</h2>
        </div>
        <button class="btn btn-dark text-white mx-0 my-2 mr-md-3" data-toggle="modal" data-target="#NotificationChannelModal">
          <span class="text-nowrap">Notification Channels</span>
        </button>
      </div>
      <div id="r-banner" info="{{ $.Meta.Templates }}"></div>
      <div class="row flex-column flex-sm-row justify-content-center align-content-center mx-0 my-2 metrics-section mx-auto">
        <div class="col-12 col-sm col-xl mr-sm-3 mt-1 mb-2 p-2 shadow-sm border custom-border-radius custom-background-color">
          <div class="row d-flex align-items-center mx-1 metric-card-row">
            <div class="col-3 col-sm-4 col-xl-4 my-auto icon">
              <i class="fas fa-user"></i>
            </div>
            <div class="px-1 col-9 col-sm-8 col-xl-8 metric-value">
              <span id="validators">{{ .Metrics.Validators }}</span>
              <span class="metric-description">Validators in your watchlist</span>
            </div>
          </div>
        </div>
        <div class="col-12 col-sm col-xl mr-sm-3 mt-1 mb-2 p-2 shadow-sm border custom-border-radius custom-background-color">
          <div class="row d-flex align-items-center mx-1 metric-card-row">
            <div class="col-3 col-sm-4 col-xl-4 my-auto icon">
              <i class="fas fa-bell"></i>
            </div>
            <div class="px-1 col-9 col-sm-8 col-xl-8 metric-value">
              <span id="notifications">{{ .Metrics.Subscriptions }}</span>
              <span class="metric-description">Number of subscriptions</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-md-block mr-3 mt-1 mb-2 p-2 shadow-sm border container-max-width metric-card custom-border-radius custom-background-color">
          <div class="row d-flex align-items-center mx-1 metric-card-row">
            <div class="col-3 col-sm-4 col-xl-4 my-auto icon">
              <i class="fas fa-bullseye"></i>
            </div>
            <div class="px-1 col-9 col-sm-8 col-xl-8 metric-value">
              <span id="attestationsMissed">{{ .Metrics.AttestationsMissed }}</span>
              <span class="metric-description">Validator(s) that missed an att<span class="d-inline d-xl-none">.</span><span class="d-none d-xl-inline">estation</span> in <span class="d-none d-xl-inline">the</span> past month</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-lg-block mr-3 mt-1 mb-2 p-2 shadow-sm border container-max-width metric-card custom-border-radius custom-background-color">
          <div class="row d-flex align-items-center mx-1 metric-card-row">
            <div class="col-3 col-sm-4 col-xl-4 my-auto icon">
              <i class="fas fa-envelope-open-text"></i>
            </div>
            <div class="px-1 col-9 col-sm-8 col-xl-8 metric-value">
              <span id="proposalsSubmitted">{{ .Metrics.ProposalsSubmitted }}</span>
              <span class="metric-description">Validator(s) that prop<span class="d-inline d-xl-none">.</span><span class="d-none d-xl-inline">osed</span> a block in <span class="d-none d-xl-inline">the</span> past month</span>
            </div>
          </div>
        </div>
        <div class="col d-none d-lg-block mt-1 mb-2 p-2 shadow-sm border container-max-width metric-card custom-border-radius custom-background-color">
          <div class="row d-flex align-items-center mx-1 metric-card-row">
            <div class="col-3 col-sm-4 col-xl-4 my-auto icon">
              <i class="fas fa-bullseye"></i>
            </div>
            <div class="px-1 col-9 col-sm-8 col-xl-8 metric-value">
              <span id="proposalsMissed">{{ .Metrics.ProposalsMissed }}</span>
              <span class="metric-description">Validator(s) that failed to prop<span class="d-inline d-xl-none">.</span><span class="d-none d-xl-inline">ose</span> in <span class="d-none d-xl-inline">the</span> past month</span>
            </div>
          </div>
        </div>
      </div>
      <div class="row flex-xl-nowrap mx-0 my-3 container-min-width">
        <div class="col-12 col-xl mb-3 p-1 shadow-sm border container-height custom-border-radius custom-background-color">
          <div class="mt-3 d-flex flex-row align-items-start align-items-center justify-content-between mx-3 mb-2">
            <div>
              <h2 class="heading-l2">Monitoring</h2>
            </div>
            <!-- <button id="add-monitoring-event-modal-button" class="btn btn-primary ml-sm-3 text-white" data-toggle="modal" data-target="#addMonitoringEventModal">
							<span class="text-nowrap d-none d-sm-inline">Add monitoring event</span>
							<span class="text-nowrap d-sm-none">Add</span>
						</button> -->
          </div>
          {{ if .Machines }}
            <div class="text-sm-center text-empty-section" id="monitoring-section-empty" hidden>
              <h3 class="mt-5 mb-3 heading-l2">We've detected 1 device(s)</h3>
              <h4 class="heading-l3">Setup notifications in the <span class="font-weight-bold">Beaconchain app</span> and get notified about <span class="d-block">disk space usage, cpu usage and offline events (currently only available on mainnet).</span></h4>
              <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-center mt-5 mb-1">
                <a class="mx-2 my-2" href="https://apps.apple.com/app/beaconchain-dashboard/id1541822121" target="_blank">
                  <img src="../img/ios.png" class="badge-button" height="56" />
                </a>
                <a class="mx-2 my-2" href="https://play.google.com/store/apps/details?id=in.beaconcha.mobile" target="_blank">
                  <img src="../img/android.png" class="badge-button" height="56" />
                </a>
              </div>
            </div>
          {{ else }}
            <div class="text-sm-center text-empty-section" id="monitoring-section-empty" hidden>
              <h3 class="mt-5 mb-3 heading-l2">
                Monitor your staking device and beacon <span class="d-block"> node with <span class="font-weight-bold">Beaconchain app</span></span>
              </h3>
              <h4 class="heading-l3">
                Check out our Knowledge Base for a step by step tutorial: <span class="d-block"><a href="https://kb.beaconcha.in/beaconcha.in-explorer/mobile-app-less-than-greater-than-beacon-node">Mobile App Node Monitoring</a></span>
              </h4>
              <div class="d-flex flex-column flex-sm-row align-items-start align-items-sm-center justify-content-center mt-5 mb-1">
                <a class="mx-2 my-2" href="https://apps.apple.com/app/beaconchain-dashboard/id1541822121" target="_blank">
                  <img src="../img/ios.png" class="badge-button" height="56" />
                </a>
                <a class="mx-2 my-2" href="https://play.google.com/store/apps/details?id=in.beaconcha.mobile" target="_blank">
                  <img src="../img/android.png" class="badge-button" height="56" />
                </a>
              </div>
            </div>
          {{ end }}
          <div class="px-0 py-1" id="monitoring-section-with-data"></div>
        </div>
        <div class="col-12 col-xl mt-3 mt-xl-0 mb-3 ml-xl-3 p-1 shadow-sm border container-height custom-border-radius custom-background-color">
          <div class="mt-3 d-flex align-items-start flex-row align-items-center justify-content-between mx-3 mb-2">
            <div>
              <h2 class="heading-l2">Network</h2>
            </div>
            <button class="btn btn-primary ml-sm-3 text-white" data-toggle="modal" data-target="#NetworkEventModal" disabled>
              <span class="text-nowrap d-none d-sm-inline">Add network event</span>
              <span class="text-nowrap d-sm-none">Add</span>
            </button>
          </div>
          {{ if not .Network }}
            <div class="ml-3 mx-sm-auto text-sm-center text-empty-section">
              <h3 class="mt-5 heading-l2">No network notifications yet</h3>
              <h4 class="mt-2 heading-l3">Subscribe to events to receive notifications</h4>
            </div>
          {{ else }}
            <div class="px-0 py-1">
              <table class="table table-borderless table-hover" id="network-notifications">
                <thead class="custom-table-head">
                  <tr>
                    <th scope="col" class="h6 border-bottom-0">Notification</th>
                    <th scope="col" class="h6 border-bottom-0">Network</th>
                    <th scope="col" class="h6 border-bottom-0"><i class="fas fa-mobile fa-lg"></i></th>
                    <th scope="col" class="h6 border-bottom-0"><i class="fas fa-envelope fa-lg"></i></th>
                    <th scope="col" class="h6 border-bottom-0"><i class="fas fa-globe fa-lg"></i></th>
                    <th scope="col" class="h6 border-bottom-0">Most Recent</th>
                  </tr>
                </thead>
                <tbody></tbody>
              </table>
            </div>
          {{ end }}
        </div>
      </div>
      <div id="watchlist-container" class="mx-0 my-3 p-1 shadow-sm border container-min-width validators-container-min-height custom-border-radius custom-background-color">
        <div class="row d-flex flex-lg-nowrap align-items-center mx-2 mt-3 py-2">
          <div class="col-12 col-md-3 d-flex justify-content-start px-0">
            <h2 class="heading-l2 mb-2 mb-md-0">Validators</h2>
          </div>
          <div class="col-12 col-md-9 d-flex justify-content-start justify-content-sm-end px-0">
            <button class="btn btn-primary text-white mx-1" data-toggle="modal" data-target="#AddValidatorWatchlistModal">
              <i style="width: 1rem;" class="fas fa-plus mr-2 text-center d-inline-block" id="add-validator-btn-icon"></i>
              <span class="text-nowrap" id="add-validator-btn-text">Add validator</span>
            </button>
            <div class="dropdown">
              <button data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle btn btn-dark text-white mx-1" type="button" id="validatorTableDropdown">More</button>
              <div class="dropdown-menu dropdown-menu-right">
                <a class="dropdown-item py-2 cursor-pointer" href="{{ .DashboardLink }}" id="view-dashboard" title="View your validator(s) in the beaconchain Dashboard">
                  <i style="width: 1rem;" class="fas fa-chart-pie d-inline-block mr-2 text-center"></i>
                  <span class="d-inline text-nowrap">View Stats</span>
                </a>
                <a id="selectAll-notifications-btn" class="dropdown-item py-2 cursor-pointer">
                  <span class="" title="Select all of your validator(s) in your watchlist">
                    <i style="width: 1rem;" class="fas fa-hand-pointer d-inline-block mr-2 text-center"></i>
                    <span class="d-inline text-nowrap">Select All</span>
                  </span>
                </a>
                <a id="manage-notifications-btn" class="dropdown-item py-2 cursor-pointer">
                  <span class="" data-toggle="modal" data-target="#ManageNotificationModal" title="Manage notifications for the selected validator(s)">
                    <i style="width: 1rem;" class="fas fa-cog d-inline-block mr-2 text-center"></i>
                    <span class="text-nowrap">Manage Selected</span>
                  </span>
                </a>
                <a id="remove-selected-btn" class="dropdown-item py-2 cursor-pointer">
                  <span class="w-100 " data-toggle="modal" data-target="#RemoveSelectedValidatorsModal" title="Remove selected validators from your watchlist">
                    <i style="width: 1rem;" class="fas fa-times d-inline-block mr-2 text-center"></i>
                    <span class="d-inline text-nowrap">Remove Selected</span>
                  </span>
                </a>
              </div>
            </div>
          </div>
        </div>
        {{ if eq (len .Validators) 0 }}
          <div class="mx-sm-auto text-sm-center text-empty-section">
            <h3 class="mt-5 heading-l2">No Validators in your watchlist</h3>
            <h4 class="mt-2 heading-l3">Start adding Validators and subscribe to events to receive notifications</h4>
          </div>
        {{ else }}
          <div class="mx-2 mb-3 pb-1 heading-l4">Hold down <kbd>Ctrl</kbd> to select multiple rows in the table</div>
          <div style="margin: 0 -.25rem !important; overflow-x: auto;" class="px-0 py-3 typeahead-container">
            <table class="table table-borderless table-hover" id="validators-notifications">
              <thead class="custom-table-head">
                <tr>
                  <th scope="col" class="h6 border-bottom-0">Validator</th>
                  <th scope="col" class="h6 border-bottom-0">Subscriptions</th>
                  <th scope="col" class="h6 border-bottom-0"><i class="fas fa-mobile fa-lg"></i></th>
                  <th scope="col" class="h6 border-bottom-0" title="Subscribed"><i class="fas fa-envelope fa-lg"></i></th>
                  <th scope="col" class="h6 border-bottom-0"><i class="fas fa-globe fa-lg"></i></th>
                  <th scope="col" class="h6 border-bottom-0">Most Recent</th>
                  <th scope="col" class="h6 border-bottom-0"></th>
                </tr>
              </thead>
              <tbody></tbody>
            </table>
          </div>
        {{ end }}
      </div>
    </div>

    <!-- Modals -->
    <!-- Confirm Remove modal -->
    <div class="modal fade" id="confirmRemoveModal" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="confirmRemoveLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content row mx-0 custom-background-color custom-remove-modal">
          <div class="mb-4 custom-remove-modal-close">
            <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="w-100 mb-2 heading-l2 text-center">Confirm Removal</div>
          <div class="col-12 d-flex align-items-center mb-5 px-0 h6">
            <span class="text-left font-weight-normal" id="modaltext"></span>
          </div>
          <div class="col-12 d-flex align-items-center justify-content-between px-0">
            <button class="btn btn-dark btn-sm w-50 mr-2 mr-sm-3 text-white" data-dismiss="modal">Cancel</button>
            <button id="remove-button" class="btn btn-primary btn-danger btn-sm w-50 ml-sm-3 text-white">Remove</button>
          </div>
        </div>
      </div>
    </div>
    <!-- Add Monitoring events modal -->
    <div class="modal fade custom-modal" id="addMonitoringEventModal" data-backdrop="static" data-keyboard="true" tabindex="-1" role="dialog" aria-labelledby="addMonitoringEventLabel" aria-hidden="true">
      <div class="modal-dialog modal-dialog-centered custom-modal-dialog" role="document">
        <div class="modal-content mx-0 custom-background-color custom-remove-modal custom-modal-content">
          <div class="mb-1 mb-sm-4 custom-remove-modal-close">
            <button class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          </div>
          <div class="col-sm-12 d-flex flex-column align-items-center justify-content-center mb-3 mb-sm-5 px-0 h6">
            <div class="w-100 heading-l2 text-center">
              Monitoring Notifications
              <span class="d-block mt-3 heading-l4 text-left">Select events to receive email notifications about or turn notifications off</span>
            </div>
            <div id="add-validator-search-container" class="w-100 mb-3">
              <div class="my-3">
                <!-- <input id="add-monitoring-validator-input" class="form-control monitoring-typeahead" type="text" autocomplete="off" spellcheck="false" placeholder="Select your machine..." aria-label="Search machine"> -->
                <select name="Select your machine..." id="add-monitoring-validator-select" class="form-control scrollbar"></select>
              </div>
              <div class="mb-3">
                <div class="form-check form-check-inline w-100 mb-2">
                  <label class="form-check-label mr-auto font-weight-normal" for="cpu">
                    <i class="fas fa-microchip fa-sm d-inline-block mr-2"></i>
                    CPU Usage
                  </label>
                  <input class="form-check-input checkbox-custom-size monitoring" type="checkbox" id="cpu" event="monitoring_cpu_load" value="" />
                </div>
                <div class="w-100 d-flex align-items-center pl-2">
                  <input id="cpu-input-range" class="w-75 mr-5 range custom-range" type="range" value="60" min="0" max="100" data-target="#cpu-input-range-val" style="background-size: 60%;" />
                  <input id="cpu-input-range-val" class="range custom-range-input" type="number" value="60" min="0" max="100" data-target="#cpu-input-range" />
                </div>
              </div>
              <div class="mb-3">
                <div class="form-check form-check-inline w-100 mb-2">
                  <label class="form-check-label mr-auto font-weight-normal" for="hdd">
                    <i class="fas fa-hdd fa-sm d-inline-block mr-2"></i>
                    HDD Usage
                  </label>
                  <input class="form-check-input checkbox-custom-size monitoring" type="checkbox" id="hdd" event="monitoring_hdd_almostfull" value="" />
                </div>
                <div class="w-100 d-flex align-items-center pl-2">
                  <input id="hdd-input-range" class="w-75 mr-5 range custom-range" type="range" value="10" min="0" max="100" data-target="#hdd-input-range-val" style="background-size: 10%;" />
                  <input id="hdd-input-range-val" class="range custom-range-input" type="number" value="10" min="0" max="100" data-target="#hdd-input-range" />
                </div>
              </div>
              <div class="form-check form-check-inline w-100">
                <label class="form-check-label mr-auto font-weight-normal" for="offline">
                  <i class="fas fa-battery-full fa-sm d-inline-block mr-2"></i>
                  Machine Offline
                </label>
                <input class="form-check-input checkbox-custom-size monitoring" type="checkbox" id="offline" event="monitoring_machine_offline" value="" />
              </div>
            </div>
            <div class="mt-2 mt-sm-3 heading-l4 font-weight-bold">
              <span class="icon-small"><i class="fas fa-bell fa-lg mr-2"></i></span>Set custom thresholds to be notified about with a <a href="/premium">Premium Subscription</a>
            </div>
          </div>
          <div class="col-sm-12 d-flex align-items-center justify-content-between mt-auto mt-sm-1 px-0">
            <button class="btn btn-dark btn-sm w-50 mr-2 mr-sm-3 text-white" data-dismiss="modal">Cancel</button>
            <button id="add-monitoring-event" class="btn btn-primary btn-primary btn-sm w-50 ml-sm-3 text-white">Save</button>
          </div>
        </div>
      </div>
    </div>

    {{ template "AddValidatorWatchlistModal" .AddValidatorWatchlistModal }}
    {{ template "NotificationChannelModal" .NotificationChannelsModal }}
    {{ template "RemoveSelectedValidatorsModal" . }}
    {{ template "ManageNotificationModal" .ManageNotificationModal }}
    {{ template "NetworkEventModal" .NetworkEventModal }}
  {{ end }}
{{ end }}
